<template>
  <div class="login">
    <div class="head">
      <div class="background">
        <img src="../assets/background.png" alt="" />
      </div>
      <div class="person">
        <div class="image">
          <img src="../assets/login_1.png" alt="" />
        </div>
        <div class="get_login">
          <span>请登录/注册您的账号</span>
          <div class="touch">
            <img src="../assets/touch_to_login.png" alt="" />
            <span>点击登录</span>
          </div>
        </div>
      </div>
      <div class="list">
        <ul>
          <li><span>-</span><span>商品收藏</span></li>
          <li><span>-</span><span>店铺收藏</span></li>
          <li><span>-</span><span>我的足迹</span></li>
        </ul>
      </div>
    </div>
    <div class="my_order">
      <ul>
        <li v-for="photo in my_order" :key="photo.name">
          <img :src="photo.path" />
          {{ photo.name }}
        </li>
      </ul>
    </div>
    <div class="my_cell">
      <ul>
        <li><span>-</span><span>优惠券</span></li>
        <li><span>-</span><span>白条额度</span></li>
        <li><span>-</span><span>京豆</span></li>
        <li><span>-</span><span>红包</span></li>
        <li>
          <span><img src="../assets/login_6.png" /></span>我的资产<span></span>
        </li>
      </ul>
    </div>
    <div class="my_tools">
      <div class="tools_title">
        <h4>工具与服务</h4>
      </div>
      <div class="tools_content">
        <ul>
          <li v-for="tool in my_tools" :key="tool.name">
            <img :src="tool.path" />
            {{ tool.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="title">
      <span>为您推荐</span>
    </div>
    <div class="wares">
      <div class="goods" v-for="img in wares" :key="img.img">
        <div slot="head">
          <router-link to="/goods"><img :src="img.img" /></router-link>
        </div>
        <div slot="bottom" class="bottom">
          <span class="name">{{ img.name }}</span>
          <span class="price">¥{{ img.price }}</span>
          <span class="comments">{{ img.comments }}</span>
          <input type="button" value="看相似" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      my_order: [
        {
          name: "待付款",
          path: require("../assets/login_2.png"),
        },
        {
          name: "待收货",
          path: require("../assets/login_3.png"),
        },
        {
          name: "退款/售后",
          path: require("../assets/login_4.png"),
        },
        {
          name: "全部订单",
          path: require("../assets/login_5.png"),
        },
      ],
      my_tools: [
        {
          name: "客户服务",
          path: require("../assets/tools_1.webp"),
        },
        {
          name: "我的预约",
          path: require("../assets/tools_2.webp"),
        },
        {
          name: "我的问答",
          path: require("../assets/tools_3.webp"),
        },
        {
          name: "闲置换钱",
          path: require("../assets/tools_4.webp"),
        },
        {
          name: "高价回收",
          path: require("../assets/tools_5.webp"),
        },
      ],
      wares: [
        {
          img: require("../assets/goods_1.png"),
          name: "清扬(CLEAR)洗发露 控油平衡型(去屑+控油)500g洗发水 (氨基酸洗发)",
          price: "47.90",
          comments: "2000+条评论",
        },
        {
          img: require("../assets/goods_2.png"),
          name: "紫光园 麻酱烧饼 火烧芝麻酱烧饼 清真食品早餐空气炸锅食材 北京特产 麻酱烧饼280g*2袋（8个）",
          price: "36.80",
          comments: "5000+条评论",
        },
        {
          img: require("../assets/goods_3.png"),
          name: "初屋 餐桌 实木岩板餐桌现代简约家用小户型大理石餐桌椅组合可伸缩折叠圆桌圆形吃饭桌子 1.35米黑白色【12MM雪山白岩板】 单餐桌",
          price: "1380.00",
          comments: "2万+条评论",
        },
        {
          img: require("../assets/goods_4.png"),
          name: "骏德 衣柜推拉门 简易木质小衣柜衣橱简约现代推拉门衣柜 木 浅胡桃色 A款长80cm宽45cm高180cm",
          price: "238.00",
          comments: "4000+条评论",
        },
        {
          img: require("../assets/goods_5.png"),
          name: "德运 (Devondale) 澳大利亚原装进口 全脂成人奶粉1kg袋装 调制乳奶粉 学生青少年中老年奶粉",
          price: "61.00",
          comments: "8000+条评论",
        },
        {
          img: require("../assets/goods_6.png"),
          name: "御泥坊套装 美白嫩肤补水护肤品套装化妆品水乳女送礼 洗面奶水乳液睡膜面膜眼膜贴素颜霜",
          price: "269.90",
          comments: "1万+条评论",
        },
      ],
    };
  },
};
</script>
<style>
.login {
  background-color: rgb(246, 246, 246);
}
.login .head {
  width: 100%;
  height: 180px;
}
.login .head .background img {
  width: 320px;
}
.login .head .person {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-flow: row;
}
.login .head .person .image img {
  width: 50px;
}
.login .head .person .get_login {
  margin-left: 12px;
}
.login .head .person .get_login span {
  font-size: 10px;
  color: white;
}
.login .head .person .get_login .touch {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(221, 35, 57);
  border-radius: 15px;
  width: 90px;
  height: 25px;
}
.login .head .person .get_login .touch img {
  width: 15px;
}
.login .head .person .get_login .touch span {
  padding-left: 8px;
}
.login .head .list {
  position: relative;
  margin-top: -100px;
  margin-left: 40px;
}
.login .head .list li {
  display: inline-flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-right: 45px;
  color: white;
  font-size: 10px;
}
.login .my_order {
  width: 100%;
  height: 80px;
  overflow: hidden;
  border-radius: 10px;
  margin-top: -33px;
}
.login .my_order ul {
  width: 100%;
  display: flex;
  justify-content: center;
}
.login .my_order li {
  width: 80px;
  height: 80px;
  display: inline-flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  font-size: 12px;
}
.login .my_order li img {
  width: 25px;
}
.login .my_cell {
  width: 100%;
  height: 80px;
  overflow: hidden;
  border-radius: 10px;
  margin-top: 30px;
  background-color: white;
}
.login .my_cell ul {
  width: 100%;
  display: flex;
  justify-content: center;
}
.login .my_cell li {
  width: 64px;
  height: 80px;
  display: inline-flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;

  font-size: 12px;
}
.login .my_cell li img {
  width: 25px;
}
.login .my_tools {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 10px;
  margin-top: 30px;
  background-color: white;
  display: flex;
  flex-flow: column;
}
.login .my_tools .tools_title {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid rgb(249, 249, 249);
}
.login .my_tools .tools_title h4 {
  margin-left: 15px;
  margin-top: 10px;
}
.login .my_tools .tools_content ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.login .my_tools .tools_content li {
  height: 80px;
  width: 80px;
  display: inline-flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;

  font-size: 12px;
}
.login .my_tools .tools_content li img {
  width: 40px;
}
.login .title {
  margin-top: 10px;
  width: 70px;
  font-size: 10px;
  text-align: center;
  color: rgb(153, 153, 153);
  margin-left: 50%;
  transform: translateX(-50%);
}
.login .title ::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: #ccc;
  margin-top: -1px;
  transform: rotate(45deg);
}
.login .title ::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: #ccc;
  margin-top: -1px;
  transform: rotate(45deg);
}
.goods {
  margin-left: 10px;
  margin-top: 10px;
}
.goods .bottom {
  padding: 2px 2px 2px 2px;
  display: flex;
  flex-flow: column;
}
.goods .name {
  width: 100%;
  height: 35px;
  overflow: hidden;
}
.goods .price {
  font-size: 20px;
  color: red;
  margin-top: 20px;
  margin-left: 5px;
}
.goods .comments {
  margin-left: 5px;
}
.goods .bottom input {
  background-color: rgb(246, 246, 246);
  font-size: 10px;
  width: 45px;
  border-radius: 10px;
  border: none;
  margin-left: 93px;
  margin-top: -15px;
}
</style>